<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>毕业设计选题管理系统·登录</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            background-color: beige;
        }

        #app {
            height: 100%;
            background-color: beige;
        }

        #app > .main {
            width: 500px;
            height: auto;
            padding-bottom: 25px;
            background-color: #FFFFFF;
            box-shadow: 0 0 14px #CCCCCC;
            border-radius: 7px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #app > .main > .head {
            border: 5px solid #FFFFFF;
            position: relative;
            margin: auto;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            top: -50px;
            background-color: #FFFFFF;
            box-shadow: 0 0 14px #CCCCCC;
            background-image: url("/static/svg/head-boy.svg");
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
        }

        #app > .main > .input-box {
            height: auto;
        }

        #app > .main > .input-box > div {
            text-align: center;
        }

        #app > .main > .input-box > div > label > input {
            width: 250px;
            height: 30px;
            margin-bottom: 25px;
            border: 1px solid #FFFFFF;
            border-bottom: 1px solid #777777;
            outline: none;
            font-size: 16px;
        }

        #app > .main > .input-box > div > #login {
            width: 250px;
            height: 40px;
            outline: none;
            font-size: 16px;
            margin-bottom: 25px;
            border: none;
            color: #FFFFFF;
            cursor: pointer;
            background-color: #6666FF;
            transition: 300ms ease all;
        }

        #app > .main > .input-box > div > #login:hover {
            background-color: rgba(102, 102, 255, 0.75);
        }

        #app > .main > .input-box > div > #register {
            width: 250px;
            height: 40px;
            outline: none;
            font-size: 16px;
            margin-bottom: 25px;
            border: none;
            color: #FFFFFF;
            cursor: pointer;
            background-color: #97a89d;
            transition: 300ms ease all;
        }

        #app > .main > .input-box > div > #register:hover {
            background-color: rgba(102, 204, 255, 0.75);
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/static/css/message.css"/>
</head>
<body>

<div id="app">
    <div class="main">
        <div class="head"></div>
        <form id="login-form" action="/" method="post" class="input-box">
            <div>
                <label>
                    <input id="account" type="text" autocomplete="off" placeholder="请输入账号" value="">
                </label>
            </div>
            <div>
                <label>
                    <input id="password" type="password" autocomplete="off" placeholder="请输入密码" value="">
                </label>
            </div>
            <div>
                <button id="login">登录</button>
            </div>
            <div>
                <button id="register">注册</button>
            </div>
        </form>
    </div>
</div>

<script src="/static/js/jquery-3.6.1.js" type="text/javascript"></script>
<script src="/static/js/message.js" type="text/javascript"></script>
<script type="application/javascript">
    $(function () {
        // 跳转到注册页
        $('#register').click(function () {
            window.location.href = "/static/register.html";
        });

        // 监听登录表单
        $('#login-form').submit(function (e) {
            // 获取表单数据
            let input_account = $('#account').val();
            let input_password = $('#password').val();

            // 提交登录请求
            $.ajax({
                url: '/api/user/login',
                type: "POST",
                data: {
                    'account': input_account,
                    'password': input_password
                },
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        // 获取角色
                        $.ajax({
                            url: '/api/user-role/my-role',
                            type: "GET",
                            success: function (res) {
                                if (res.code === 0) {  // 业务层面成功
                                    window.sessionStorage.setItem('role', JSON.stringify(res.data));
                                } else {
                                    $.message({type: 'error', content: res.msg});
                                }
                            }
                        });

                        // 弹出信息
                        $.message({
                                type: 'success', content: res.msg, onClose: function () {
                                    window.location.href = "/static/index.html";
                                }
                            }
                        );
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>